<template>
  <div class="goods-activity" v-loading.fullscreen.lock="loading">
    <page-main :pagination="pagination" @search-data="searchData" @page-change="pageChange">
      <template slot="search">
        <search-form v-if="search!==null" :search="search" :dropdown-option="dropdownOption"></search-form>
      </template>
      <!-- <template slot="append">
        <el-button type="primary" size="medium" @click="addActivity">新增</el-button>
      </template> -->
      <template slot="table">
        <el-table fit stripe border highlight-current-row :data="activityList" height="100%">
          <el-table-column prop="activityTypeName" label="活动类型" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="branchName" label="所属总店" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="partnerName" label="所属分店" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="goodsName" label="活动商品" min-width="120px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="开始时间" width="160px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.activityStartTime!==null">
                {{$moment(scope.row.activityStartTime).format('YYYY-MM-DD HH:mm:ss')}}
              </span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="结束时间" width="160px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.activityEndTime!==null">
                {{$moment(scope.row.activityEndTime).format('YYYY-MM-DD HH:mm:ss')}}
              </span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="状态" width="80px" align="center">
            <template slot-scope="scope">
              <span :class="'status_'+scope.row.status">{{i18n.getMsg(`goods.goodsActivity.status.${scope.row.status}`)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" width="80px" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status===1" size="mini" type="danger" @click="updateStatus(scope.row,0)">禁用</el-button>
              <el-button v-else size="mini" type="primary" @click="updateStatus(scope.row,1)">启用</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </page-main>

    <el-dialog :title="dialogTitle[dialogType]" custom-class="sys-dialog" :close-on-click-modal="false" :visible.sync="openDialog" width="450px"
      top="10vh" @closed="dialogClosed">
      <div style=":max-height:calc(80vh - 54px);height:370px;overflow:auto">
        <goods-activity-form v-if="openDialog" :activity="selectActivity" :type="dialogType" :dropdown-option="dropdownOption"
          @save-success="saveSuccess">
        </goods-activity-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import GoodsApi from 'services/goodsApi';

  import PageMain from 'commonComponents/pageMain';
  import SearchForm from './searchForm';
  import GoodsActivityForm from './goodsActivityForm';

  import Pagination from 'models/pagination';
  import GoodsActivitySearch from 'models/goods/goodsActivitySearch';

  export default {
    data() {
      return {
        loading: false,
        search: new GoodsActivitySearch(),
        pagination: new Pagination(),
        activityList: [],
        dropdownOption: {},
        openDialog: false,
        dialogType: '',
        selectActivity: null,
        dialogTitle: {
          add: "新增商品活动",
          update: "修改商品活动"
        }
      };
    },

    created() {
      this.setActivityList(true);
    },

    methods: {
      setActivityList(isSearch = false) {
        let search = this.search;
        if (!isSearch) {
          search.resetOldData();
        }

        let code = search.checkValid();
        if (code !== '') {
          let msg = this.i18n.getMsg(`goods.goodsActivity.error.${code}`);
          this.$message(msg);
          return;
        }

        this.loading = true;
        GoodsApi.getGoodsActivityList(search, this.pagination).then(activityList => {
          this.activityList = activityList;
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },

      searchData() {
        this.pagination.currentPage = 1;
        this.setActivityList(true);
      },

      pageChange() {
        this.setActivityList();
      },

      addActivity() {
        this.dialogType = 'add';
        this.openDialog = true;
      },

      saveSuccess() {
        this.openDialog = false;
        this.setActivityList();
      },

      dialogClosed() {
        this.dialogType = '';
        this.selectActivity = null;
      },

      updateStatus(goodsActivity, status) {
        this.loading = true;
        GoodsApi.updateGoodsActivityStatus(goodsActivity, status).then(() => {
          this.loading = false;
          let msg = status === 0 ? '该商品活动成功禁用' : '该商品活动成功启用';
          this.$alert(msg, '信息', {
            callback: () => {
              this.setActivityList();
            }
          });
        }).catch(() => {
          this.loading = false;
        });
      }
    },

    components: {
      PageMain,
      SearchForm,
      GoodsActivityForm
    }
  };

</script>

<style lang="scss" scoped>
  .goods-activity {
    height: 100%;

    .status_0 {
      color: #ff0000;
    }

    .status_1 {
      color: #11b95c;
    }
  }

</style>
